<template>
  <Form class="events-form" :label-width="100" inline>
    <FormItem label="分公司选择" :label-width="120">
      <Select v-model="subCompany">
        <Option v-for="item in subCompanyList" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="站点选择">
      <Select v-model="station">
        <Option v-for="item in stationList" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="场景选择">
      <Select v-model="category">
        <Option v-for="item in categoryList" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="事件选择">
      <Select v-model="eventAction">
        <Option v-for="item in actionsList" :value="item.label" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <!-- <FormItem label="报警等级">
      <Select v-model="eventLevel">
        <Option v-for="item in levelList" :value="item.value" :key="item.value">
          {{ item.label }}
        </Option>
      </Select>
    </!-->
    <FormItem label="选择日期">
      <DatePicker v-model="queryTimeRange" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 210px">
      </DatePicker>
    </FormItem>
    <FormItem :label-width="20">
      <Button type="primary" @click="searchData('buttom')">查询</Button>
      <!-- <Button style="margin-left: 8px">重置</Button> -->
    </FormItem>
  </Form>
</template>

<script>
// 工具
import dayjs from "dayjs";
import {mapState, mapGetters, mapActions} from 'vuex'
import constData from "@/util/constData2";

export default {
  data() {
    return {
      subCompany: "xian",
      station: "all",
      category: "all",
      eventAction: "全部",
      eventLevel: "4",
      queryTimeRange: "",
      subCompanyList: constData.subCompanyList, // 子公司列表
      stationList: constData.stationList, // 站点列表
      categoryList: constData.categoryList, // 场景列表
      actionList: constData.actionList, // 动作列表
      levelList: constData.levelList, // 违规级别列表

      actionsList: []
    }
  },
  computed: {
    ...mapState(['eventsPageCurrent', 'eventsPageSize'])
  },
  watch: {
    category: {
      deep: true,
      handler() {
        this.actionsList = this.actionList.filter((ele, index) => {
          return ele.category === this.category
        })
      }
    },
    eventsPageCurrent(value) {
      this.searchData('page')
    }
  },
  mounted() {
    this.searchData('page')
  },
  methods: {
    ...mapActions([
      'getQueryEventsTableData',
      'updateEventsQueryPageIndex'
    ]),
    searchData(type) {
      if(type === 'buttom') this.updateEventsQueryPageIndex(1) // 每次查询的时候先更新页码为 1 开始
      // console.log("点击查询按钮：",this.eventAction)
      let station = this.station === "all" ? "" : this.station;
      let category = this.category === "all" ? "" : this.category;
      let action = this.eventAction === "全部" ? "" : this.eventAction;
      let level = this.eventLevel === "4" ? "" : this.eventLevel;
      let page_index = this.eventsPageCurrent
      let page_size = this.eventsPageSize

      if (this.queryTimeRange[0] === "") {
        this.queryTimeRange[0] = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss");
        this.queryTimeRange[1] = dayjs().format("YYYY-MM-DD 23:59:59");

        let eventsParams = {
          start_time: this.queryTimeRange[0],
          end_time: this.queryTimeRange[1],
          station: station,
          category: category,
          action: action,
          level: level,
          page_index: page_index,
          page_size: page_size
        }
        this.getQueryEventsTableData(eventsParams)
      } else {
        let eventsParams = {
          start_time: dayjs(this.queryTimeRange[0]).format("YYYY-MM-DD HH:mm:ss"),
          end_time: dayjs(this.queryTimeRange[1]).format("YYYY-MM-DD 23:59:59"),
          station: station,
          category: category,
          action: action,
          level: level,
          page_index: page_index,
          page_size: page_size
        }
        this.getQueryEventsTableData(eventsParams)
      }
    }
  }
};
</script>

<style lang="less">
@background-color: #0a4271 !important;
@font-color: #fff !important;

.events-form .ivu-form {
  font-size: 18px !important;
}
.events-form .ivu-form-item {
  margin-bottom: 0px;
}
.events-form .ivu-form-item-label {
  font-size: 18px !important;
  color: @font-color;
  font-weight: bold;
}
.events-form .ivu-form-item-content {
  line-height: 30px;
}
.events-form .ivu-select-selected-value {
  font-size: 1.8rem !important;
  height: 30px !important;
  line-height: 30px !important;
  color: @font-color;
  font-weight: bold;
}
.events-form .ivu-select-selection {
  width: 180px;
  height: 30px !important;
  background-color: @background-color;
  border: 1px solid @background-color;
}
.events-form .ivu-select-dropdown {
  background-color: @background-color;
  max-height: 300px;
}
.events-form .ivu-select-item {
  color: @font-color;
  font-size: 1.8rem !important;
  font-weight: bold;
}
.events-form .ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #52c41a !important;
}
.events-form .ivu-select-placeholder {
  font-size: 1.8rem !important;
  height: 30px !important;
  line-height: 30px !important;
  font-weight: bold;
}
.events-form .ivu-select-item-focus {
  background-color: @background-color;
}
.events-form .ivu-select-item:hover {
  background-color: #1081b3 !important;
}
.events-form .ivu-date-picker-cells-cell-selected em,.ivu-date-picker-cells-cell-selected:hover em {
  // color: #52c41a !important;
  color: #1081b2 !important;
}
.events-form .ivu-date-picker-cells-cell-range:before {
  background-color: #1081b2 !important;
  // background-color: #52c41a !important;
}
</style>
